<!DOCTYPE html>
<!-- 
    猫狗识别系统前端页面 - 重构版
    功能：提供用户友好的图片上传和识别界面
    技术栈：HTML5 + CSS3 + JavaScript ES6
    特点：响应式设计、拖拽上传、实时预览
-->
<html lang="zh-CN">
<head>
    <!-- 设置页面字符编码为UTF-8，支持中文显示 -->
    <meta charset="utf-8">
    <!-- 设置视口，确保在移动设备上正确显示 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 页面标题，显示在浏览器标签页上 -->
    <title>🎯 AI猫狗识别系统 - 重构版</title>
    <!-- 引入外部CSS样式文件，定义页面的视觉样式 -->
    <link rel="stylesheet" href="/static/styles.css">
</head>
<body>
    <!-- 主容器：包含整个页面内容 -->
    <div class="container">
        <!-- 页面头部：包含标题和副标题 -->
        <header class="header">
            <!-- 主标题：使用emoji增加视觉吸引力 -->
            <h1>🎯 AI猫狗识别系统</h1>
            <!-- 副标题：描述系统特点和版本信息 -->
            <p class="subtitle">基于平衡数据集训练的高精度图像分类系统 - 重构版</p>
        </header>
        
        <!-- 版本信息区域：展示系统的主要特性 -->
        <div class="version-info">
            <strong>🚀 重构版特性</strong>
            <!-- 特性列表：使用网格布局展示系统优势 -->
            <div class="features-list">
                <!-- 模块化架构特性 -->
                <div class="feature-item">📁 模块化架构：代码分层清晰</div>
                <!-- 高准确率特性 -->
                <div class="feature-item">🎯 高准确率：97%训练精度</div>
                <!-- 多维特征分析特性 -->
                <div class="feature-item">🔍 16维特征：全面图像分析</div>
                <!-- RESTful API特性 -->
                <div class="feature-item">⚡ RESTful API：标准化接口</div>
                <!-- 智能学习特性 -->
                <div class="feature-item">🧠 智能学习：特征重要性分析</div>
                <!-- 现代界面特性 -->
                <div class="feature-item">🎨 现代界面：响应式设计</div>
            </div>
        </div>
        
        <!-- 文件上传表单：处理图片上传和提交 -->
        <form id="uploadForm" enctype="multipart/form-data">
            <!-- 上传区域：支持点击选择和拖拽上传 -->
            <div class="upload-area" id="uploadArea">
                <!-- 隐藏的文件输入框：实际的文件选择控件 -->
                <input type="file" id="imageFile" name="image" accept="image/*" required style="display: none;">
                <!-- 上传提示文本区域 -->
                <div class="upload-text" id="uploadText">
                    <!-- 上传图标：视觉提示 -->
                    <span class="upload-icon">📸</span>
                    <!-- 主要提示文本：指导用户如何上传 -->
                    <p class="upload-title">点击选择图片或拖拽到此处</p>
                    <!-- 格式和大小限制说明 -->
                    <p class="upload-subtitle">支持 JPG、PNG、WEBP 等格式，最大10MB</p>
                    <!-- 使用建议：提高识别准确率的提示 -->
                    <p class="upload-hint">💡 提示：清晰的猫或狗正面照片识别效果最佳</p>
                </div>
            </div>
            <!-- 提交按钮：触发图片识别过程 -->
            <button type="submit" id="submitBtn">🔍 开始智能识别</button>
        </form>
        
        <!-- 图片预览区域：显示用户选择的图片 -->
        <div id="preview"></div>
        <!-- 识别结果区域：显示AI分析结果 -->
        <div id="result"></div>
        
        <!-- 页面底部：包含API接口信息 -->
        <footer class="footer">
            <!-- API接口信息区域 -->
            <div class="api-info">
                <!-- API接口标题 -->
                <h3>🔗 API接口</h3>
                <!-- API接口列表：展示可用的后端接口 -->
                <div class="api-list">
                    <!-- 图片识别接口 -->
                    <div class="api-item">
                        <strong>POST /api/predict</strong> - 图片识别
                    </div>
                    <!-- 健康检查接口 -->
                    <div class="api-item">
                        <strong>GET /api/health</strong> - 健康检查
                    </div>
                    <!-- 模型信息接口 -->
                    <div class="api-item">
                        <strong>GET /api/model-info</strong> - 模型信息
                    </div>
                    <!-- 数据统计接口 -->
                    <div class="api-item">
                        <strong>GET /api/dataset-stats</strong> - 数据统计
                    </div>
                </div>
            </div>
        </footer>
    </div>
    
    <!-- 引入JavaScript应用文件：处理用户交互和API通信 -->
    <script src="/static/app.js"></script>
</body>
</html>
